<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/tag/localeTag.tld" prefix="t"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>Q & A</title>
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="resources/js/bootstrap.js"></script>
<script type="text/javascript" src="resources/js/qanda.js"></script>
<!-- <script type="text/javascript" src="resources/js/deleteQuestion.js"></script>
<script type="text/javascript" src="resources/js/likesQuestion.js"></script>
<script type="text/javascript" src="resources/js/changeQuestionCategory.js"></script>
<script type="text/javascript" src="resources/js/openQuestion.js"></script> -->
</head>
<body>
	<jsp:include page="parts/header.jsp"></jsp:include>
	<jsp:include page="parts/navigation.jsp"></jsp:include>
	<div class="content">
		<jsp:include page="parts/leftmenu.jsp"></jsp:include>
		<div class="page">
			<c:if test="${not empty categoryName}">
				<h2>${categoryName}</h2>
			</c:if>
			<form action="showQuestionAnswers" method="GET" id="showQuestionAnswers">
				<c:choose>
					<c:when test="${empty questions && not empty findText}">
						<h2>
							<t:locale mName="questions.notFound" />
							: ${findText}
						</h2>
					</c:when>
					<c:when test="${not empty questions && not empty findText}">
						<h2>
							<t:locale mName="questions.search" />
							: ${findText}
						</h2>
					</c:when>
					<c:when test="${empty questions}">
						<h2>
							<t:locale mName="question.emptyQuestions" />
						</h2>
					</c:when>
					<c:otherwise></c:otherwise>
				</c:choose>
				<c:if test="${not empty questions}">
					<table class="table table-striped table-condensed text-center" id="container">
						<thead>
							<tr id="${q.id}">
								<th class="text-center"><t:locale mName="likes" /></th>
								<th class="text-center"><t:locale mName="question.answers" /></th>
								<th class="text-center"><t:locale mName="question.title" /></th>
								<th class="text-center"><t:locale mName="category" /></th>
								<th class="text-center"><t:locale mName="user" /></th>
								<th class="text-center"><t:locale mName="time" /></th>
								<c:if test="${not empty user && user.roleId==2}">
									<th></th>
									<th></th>
								</c:if>
							</tr>
						</thead>
						<tbody>
							<c:forEach var="q" items="${questions}" varStatus="i">
								<tr id="${q.id}">
									<td><c:if test="${empty user || user.roleId!=1}">
											<span onclick="likeQuestionUp('${q.id}', $(this));" class="glyphicon glyphicon-circle-arrow-up"> </span>
											<span id="${q.id}" class="question">${q.likes}</span>
											<span onclick="likeQuestionDown('${q.id}', $(this));" class="glyphicon glyphicon-circle-arrow-down"></span>
										</c:if> <c:if test="${not empty user && user.roleId==1}">
											<span id="${q.id}" class="question">${q.likes}</span>
										</c:if></td>
									<td>${q.amountOfAnswers}</td>
									<td class="text-left"><span class="glyphicon glyphicon-share-alt" onclick="openQuestion('${q.id}');"> ${q.title} </span></td>
									<td class="text-left"><span onclick="selectCategory('${q.nameOfCategory}')" class="col-xs-11"> <span class="glyphicon glyphicon-share-alt"></span> ${q.nameOfCategory}
									</span></td>
									<td class="text-left">${q.userLogin}</td>
									<td><fmt:formatDate type="both" dateStyle="short" timeStyle="short" value="${q.time}" /></td>
									<c:if test="${not empty user}">
										<c:if test="${user.roleId==1}">
											<td><span onclick="showQuestionCategory(${q.id})" class="glyphicon glyphicon-transfer"> </span></td>
											<td><span onclick="confirmDeleteQuestion(${q.id})" class="glyphicon glyphicon-remove"></span></td>
										</c:if>
										<c:if test="${user.roleId==2 && user.status==false}">
											<c:forEach var="cat" items="${moderatorCategories}">
												<c:if test="${cat.categoryId==q.categoryId}">
													<td><span onclick="showQuestionCategory(${q.id})" class="glyphicon glyphicon-transfer"> </span></td>
													<td><span onclick="confirmDeleteQuestion(${q.id})" class="glyphicon glyphicon-remove"></span></td>
												</c:if>
											</c:forEach>
										</c:if>
									</c:if>
								</tr>

								<c:if test="${empty offset}">
									<c:if test="${fn:length(notFind.get(i.count-1)) > 0}">
										<tr class="text-left">
											<td colspan="6"><t:locale mName="questions.notFound" /> <c:forEach var="n" items="${notFind.get(i.count-1)}">
													<c:forEach var="s" items="${n}">
														<del>
															<small>${s}</small>
														</del>
													</c:forEach>
												</c:forEach></td>
										</tr>
									</c:if>
								</c:if>
								<c:if test="${not empty offset}">
									<c:if test="${fn:length(notFind.get(i.count-1+offset)) > 0}">
										<tr class="text-left">
											<td colspan="6"><t:locale mName="questions.notFound" /> <c:forEach var="n" items="${notFind.get(i.count-1+offset)}">
													<c:forEach var="s" items="${n}">
														<del>
															<small>${s}</small>
														</del>
													</c:forEach>
												</c:forEach></td>
										</tr>
									</c:if>
								</c:if>
							</c:forEach>
						</tbody>
					</table>
				</c:if>
				<input type="hidden" id="questionId" name="question">
			</form>
			<c:if test="${not empty questions}">
				<form action="${action}" method="GET">
					<c:if test="${action eq '/qanda/showCategoryQuestion'}">
						<input type="hidden" name="categoryName" id="categoryName" value="${categoryName}">
					</c:if>
					<c:if test="${action eq '/qanda/find'}">
						<input type="hidden" name="findText" value="${findText}">
					</c:if>
					<c:set var="count" scope="request" value="20" />
					<div class="text-center">
						<c:if test="${offset>0}">
							<button type="submit" class="btn btn-info" name="offset" value="${offset-count}">
								<t:locale mName="previous" />
								<span class="glyphicon glyphicon-chevron-left"></span>
							</button>
						</c:if>
						<c:if test="${offset+count<size}">
							<button type="submit" class="btn btn-info" name="offset" value="${offset+count}">
								<t:locale mName="next" />
								<span class="glyphicon glyphicon-chevron-right"></span>
							</button>
						</c:if>
					</div>
				</form>
			</c:if>
			<form action="showCategoryQuestion" method="GET" id="showCategoryQuestion">
				<input type="hidden" name="categoryName" id="categoryName">
			</form>
			<div id="selectQuestionCategory">
				<form action="selectQuestionCategory" class="form-horizontal" method="POST">
					<input type="hidden" name="qID" id="qID">
					<div class="form-group">
						<div class="col-xs-offset-1 col-xs-9">
							<h3>
								<t:locale mName="questions.chooseCategories" />
							</h3>
						</div>
						<div class="col-xs-2 text-right">
							<span onclick="showQuestionCategoryClose()" class="glyphicon glyphicon-remove"></span>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-offset-1 col-xs-5">
							<select name="category">
								<c:forEach items="${categories}" var="cat">
									<option value="${cat.id}">${cat.name}</option>
								</c:forEach>
							</select>
						</div>
						<div class="col-xs-offset-1 col-xs-5">
							<input type="submit" class="btn btn-info" value="<t:locale mName="questions.button.ok"/>" onclick="selectQuestionCategory()">
						</div>
					</div>
				</form>
			</div>
			<div id="confirmDeleteQuestion">
				<div class="row">
					<div class="col-xs-9">
						<h4>
							<t:locale mName="leftmenu.confirmQuestion" />
						</h4>
					</div>
					<div class="col-xs-3 text-right">
						<span onclick="confirmDeleteQuestionClose()" class="glyphicon glyphicon-remove"></span>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<button type="button" class="btn btn-danger" onclick="deleteQuestion()">
							<span class="glyphicon glyphicon-remove"></span>
							<t:locale mName="leftmenu.removeCategory" />
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="parts/footer.jsp"></jsp:include>
</body>
</html>